<template>
    <div>
        <el-tabs :tab-position="tabPosition" :value="activeTab" @tab-click="handleTabClick">
            <el-tab-pane label="角色管理" name="Role">
                <router-view></router-view>
            </el-tab-pane>
            <el-tab-pane label="部门管理" name="Dept">
                <router-view></router-view>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tabPosition: 'left'
        };
    },
    computed:{
        activeTab() {
            // 根据当前路径决定激活的标签
            const path = this.$route.path;
            if (path.includes('/OS/Role')) return 'Role';
            if (path.includes('/OS/Dept')) return 'Dept';
            return 'Role'; // 默认激活第一个
        }
    },
    methods: {
        handleTabClick(tab) {
            // 点击标签时跳转到对应子路由
            if(this.$route.path!=`/OS/${tab.name}`){
                this.$router.push(`/OS/${tab.name}`);
            }
        }
    },
    created() {this.$router.push('/OS/Role');}
};
</script>